<template>
  <div style="padding: 20px">
    <div>
      <el-input placeholder="关键词搜索" v-model="keyword" style="width: 240px;">
        <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
      </el-input>
      <el-button icon="el-icon-refresh" circle @click="refreshRole" style="width: 40px; margin-left: 8px"
        type="success"></el-button>
      <el-button type="primary" @click="addDialogVisible = true">新增角色</el-button>
    </div>
    <el-table :data="RoleList" style="width: 100%; border-radius: 10px; margin-top: 8px" stripe v-loading="loading">
      <el-table-column type="index" :index="indexMethod" label="序号" width="75" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="编码" width="160" prop="code" align="center">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80" align="center">
      </el-table-column>
      <el-table-column label="状态" width="80" sortable prop="status" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? "正常" : "禁用" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" align="center"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"
            style="width: 40px"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle style="width: 40px"
            @click="deleteRole(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 40px; margin-top: 8px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paramsForm.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="paramsForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="修改角色">
      <el-form :model="updateRoleForm" :rules="rules" ref="updateRoleForm" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="updateRoleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="code">
          <el-input v-model="updateRoleForm.code" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="updateRoleForm.sort" :min="1" :max="6"></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="updateRoleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false" style="width: 68px" size="medium">取消</el-button>
        <el-button type="primary" @click="updateOneRole('updateRoleForm')" style="width: 68px"
          size="medium">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="addDialogVisible" title="修改角色">
      <el-form :model="addRoleForm" :rules="rules" ref="addRoleForm" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addRoleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="code">
          <el-input v-model="addRoleForm.code" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        <el-form-item label="排序" required>
          <el-input-number v-model="addRoleForm.sort" :min="1" :max="6"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-radio-group v-model="addRoleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false" style="width: 68px" size="medium">取消</el-button>
        <el-button type="primary" @click="addOneRole('addRoleForm')" style="width: 68px" size="medium">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList, deleteRoleDeleteById, putRoleUpdateRole, postRoleNewRole } from '@/api/controller'
export default {
  mounted() {
    this.getRole();
  },
  data() {
    let keyword = "";
    let RoleList;
    let total = 0;
    let loading = false;
    let dialogVisible = false;
    let addDialogVisible = false;
    return {
      paramsForm: {
        pageSize: 10,
        pageNum: 1,
        key: "",
        status: ''
      },
      updateRoleForm: {
        id: 0,
        name: "",
        code: "",
        sort: 0,
        status: 0
      },
      addRoleForm: {
        name: "",
        code: "",
        sort: 1,
        status: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称！', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入角色编码！', trigger: 'change' }
        ],
      },
      keyword,
      RoleList,
      total,
      loading,
      dialogVisible,
      addDialogVisible
    };
  },
  methods: {
    indexMethod(index) {
      return (
        index + 1 + this.paramsForm.pageSize * (this.paramsForm.pageNum - 1)
      );
    },
    searchRole() {
      if (this.keyword === "") {
        this.$message.error("搜索关键词不能为空！");
      } else {
        this.paramsForm.key = this.keyword;
        this.getRole();
      }
    },
    refreshRole() {
      this.paramsForm.key = "";
      this.getRole();
    },
    async getRole() {
      this.loading = true;
      getRoleList(
        this.paramsForm
      )
        .then((response) => {
          const { data } = response;
          this.RoleList = data.list;
          this.total = data.total;
        })
        .catch((error) => {
          this.$message.error(error.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async deleteRole(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleDeleteById(id)
          .then((response) => {
            const { message } = response;
            this.$message.success(message);
            this.getRole();
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async updateOneRole(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          putRoleUpdateRole(this.updateRoleForm)
            .then((response) => {
              const { message } = response;
              this.$message.success(message);
              this.getRole();
              this.dialogVisible = false;
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        } else {
          return false;
        }
      });
    },
    async addOneRole(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          postRoleNewRole(this.addRoleForm)
            .then((response) => {
              const { message } = response;
              this.$message.success(message);
              this.getRole();
              this.addDialogVisible = false;
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        } else {
          return false;
        }
      });
    },
    handleEdit(data) {
      Object.assign(this.updateRoleForm, data);
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.paramsForm.pageSize = val;
      this.getRole();
    },
    handleCurrentChange(val) {
      this.paramsForm.pageNum = val;
      this.getRole();
    },
  },
};
</script>
<style scoped></style>